<template>
	<div class="back_contain_n visualImg">
		<div class="box">
			<div class="show_part">
				<div class="show_part_in">
					<div class="show_part_nav">
						<preview class="large_part" :themeInfo="themeInfo" :backImage="backGroundImg"></preview>
					</div>
					<p class="_p _yl" @click="openBigScreen"><i class="el-icon-zoom-in"></i> 点击预览大图</p>
					<p class="_p _dis">发布时间：<span>{{themeInfo.editPerson.split(' ')[1]}}</span></p>
					<p class="_p _dis mb">发布人：<span>{{themeInfo.editPerson.split(' ')[0]}}</span></p>
					<p class="_p _txt">
						<span class="_bf">①</span><span>请根据活动主题编辑相关“标题、单位、日期、底标”等需要展示的内容，并选择背景图片，点击“保存”即大屏端“自动发布”；</span>
					</p>
					<p class="_p _txt">
						<span class="_bf">②</span><span>如已制作包含“主题、单位、日期”等内容的完整图片，则直接“上传”并“选择”该图片，点击“保存”即大屏端“自动发布”。</span>
					</p>

				</div>
			</div>
			<div class="edit_part">
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">地址：</p>
					</div>
					<div class="part_nav part2">
						<p>{{themeInfo.address}}</p>
						<p @click="addCopy()" class="_copy" title="复制地址"><i class="el-icon-document-copy"></i></p>
						<!--<el-input class="change_input" v-else v-model="themeInfo.address" maxlength="90"-->
						<!--placeholder="请输入内容，最多输入90个字符" show-word-limit clearable></el-input>-->
						<!--<p @click="addCopy()" class="_copy" title="复制地址"><i class="el-icon-document-copy"></i></p>-->
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">标题1：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.topicName1}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.topicName1" maxlength="40"
							placeholder="请输入内容，最多输入40个字符" show-word-limit clearable></el-input>
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">标题2：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.topicName2}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.topicName2" maxlength="40"
							placeholder="请输入内容，最多输入40个字符" show-word-limit clearable></el-input>
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">单位1：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.unitName1}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.unitName1" maxlength="20"
							placeholder="请输入内容，最多输入20个字符" show-word-limit clearable></el-input>
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">单位2：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.unitName2}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.unitName2" maxlength="20"
							placeholder="请输入内容，最多输入20个字符" show-word-limit clearable></el-input>
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">日期：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.topicDate}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.topicDate" maxlength="20"
							placeholder="请输入内容，最多输入20个字符" show-word-limit clearable></el-input>
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">底标：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.markName}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.markName" maxlength="20"
							placeholder="请输入内容，最多输入20个字符" show-word-limit clearable></el-input>
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1 _last">
						<p class="firstTitle">背景图：</p>
						<p class="subTitle">建议像素1920*768<br>最多上传6张</p>
					</div>
					<div class="part_nav part2">
						<img-upload limit="6" :edit="isEdit" ref="imageUpload" :imgList="bgImages"
							@updateBackGround="updateBackGround" type="frontPage"></img-upload>
					</div>
				</li>
				<li class="btnbox">
					<div class="btns">
						<p @click="isEdit = true" v-if="!isEdit" class="zll-botton ">编 辑</p>

						<p @click="cancleSubmit" v-if='isEdit' class="zll-botton save">取消</p>
						<p @click="submitFun" v-if='isEdit' class="zll-botton download">保 存</p>


					</div>
				</li>
			</div>

		</div>

		<div class="zll-dialog">
			<el-dialog class="topic_dia" title="预览" :visible.sync="addDialog" width="80%" v-if="addDialog">
				<div class="show_part_nav2">
					<preview class="large_part2" :themeInfo="bigScreenTheme" :backImage="bigScreenImage"></preview>
				</div>
				<p slot="footer" class="zll-botton Info" @click="addDialog = false">关 闭</p>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import { getStore } from "@/plugins/localStore";
	import { formatDate } from "@/plugins/formatDate";
	import imgUpload from './imgUpload'
	import Preview from './preview'

	export default {
		components: {
			imgUpload, Preview
		},
		data() {
			return {
				addDialog: false,
				isEdit: false,
				themeInfo: {
					address: '',
					editPerson: '',
					topicName1: '',
					topicName2: '',
					unitName1: '',
					unitName2: '',
					topicDate: '',
					markName: '',
				},
				chinese: {
					address: '地址',
					topicName1: '标题1',
					topicName2: '标题2',
					unitName1: '单位1',
					unitName2: '单位2',
					topicDate: '日期',
					markName: '底标'
				},
				bgImages: [],
				backGroundImg: {},

				bigScreenTheme: {},
				bigScreenImage: {},
			}
		},
		mounted() {
			let self = this;
			self.getList();
		},
		methods: {

			openBigScreen() {
				let self = this;
				self.addDialog = true;
				self.$nextTick(() => {
					self.bigScreenTheme = Object.assign({}, self.themeInfo);
					self.bigScreenImage = Object.assign({}, self.backGroundImg);
				});

			},

			updateBackGround(val) {
				this.backGroundImg = val;
			},

			addCopy() {
				const oInput = document.createElement('input')
				oInput.value = this.themeInfo.address
				document.body.appendChild(oInput)
				oInput.select()
				document.execCommand('Copy')
				this.$message({
					message: '复制成功',
					type: 'success'
				});
				oInput.remove()
			},
			getList() {
				let self = this;
				self.bgImages = [];
				for (let key in self.themeInfo) {
					self.themeInfo[key] = '';
				}
				self.$http({
					url: "/jinl/front/getFrontDisplay",
					method: "post",
					params: { type: 'frontPage' }
				}).then(resp => {
					if (resp.success) {
						let frontDisplays = resp.result.frontDisplays || [];
						let fileInfos = resp.result.fileInfos || [];
						if (frontDisplays.length > 0) {
							for (let data of frontDisplays) {
								let pageKey = data.pageKey
								console.log(pageKey + "!!!!!!")
								if (!pageKey) {
									continue;
								}
								self.themeInfo[pageKey] = data.pageContent;
							}
						}
						if (fileInfos.length == 0) {
							return;
						}
						for (let file of fileInfos) {
							file.fileCheck = parseInt(file.fileCheck);
							file.fileBlob = file.fileUrl;
							file.fileName = file.displayName;
							self.bgImages.push(file);
							if (file.fileCheck == 1) {
								self.updateBackGround(file);
							}
						}
					}
				});
			},
			submitFun() {
				let self = this;
				let pageImages = self.$refs.imageUpload.getImages();
				if (pageImages.length == 0) {
					self.$message.warning('请上传图片！');
					return;
				}
				let checkImages = pageImages.filter((item) => item.fileCheck == 1);
				if (checkImages.length != 1) {
					self.$message.warning('勾选背景图数量只能为1张！');
					return;
				}

				let frontDisplays = [];
				for (let key in self.chinese) {
					// if (!self.themeInfo[key]) {
					// 	self.$message.warning(self.chinese[key] + '不能为空！');
					// 	return;
					// }
					let vo = { pageKey: key, pageContent: self.themeInfo[key], pageType: key, pageAttr: 'frontPage' };

					frontDisplays.push(vo);
				}
				let user = getStore();
				let userVo = { pageKey: 'editPerson', pageContent: user.userName + ' ' + formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'), pageType: 'editPerson', pageAttr: 'frontPage' };
				frontDisplays.push(userVo);

				let params = { fileInfos: pageImages, frontDisplays: frontDisplays, pageAttr: 'frontPage' };
				self.$http({
					url: "/jinl/front/addOrUpdateFrontDisplay",
					method: "post",
					data: JSON.stringify(params),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.$message.success('修改成功！');
						self.isEdit = false;
						self.getList();
						return
					}
					self.$message.warning(resp.message);
				});

			},
			cancleSubmit(){
				this.isEdit=false;
				this.getList();

			}
		},
	}
</script>
<style lang="scss" scoped>
	.visualImg {
		@font-face {
			font-family: 'fonta';
			src: url(../../../style/fontFamily.ttf);
		}

		.sub {
			text-align: center;
			line-height: 40px;
			color: #34bfc6;
			font-family: 'fonta';
			font-size: 18px;
		}

		.topic_dia {
			.show_part_nav2 {
				width: 960px;
				height: 540px;
				margin: 20px auto 5px auto;

				.large_part2 {
					width: 100%;
					height: 100%;
					transform: scale(0.5);
				}

			}

			.zll-botton {
				width: 100px;
				font-size: 14px;
			}
		}

		.box {
			margin-bottom: 15px;
			padding: 0 20px;
			display: flex;
			/* justify-content: space-between; */

			.edit_part {
				width: 60%;
				/* margin-right: 600px; */
			}

			.show_part {
				/* width: 30%; */
				display: flex;
				margin-right: 80px;

				.show_part_in {
					width: 290px;
					display: flex;
					flex-direction: column;

					.show_part_nav {
						width: 100%;
						height: 164px;
						border: 1px solid #999;

						.large_part {
							width: 100%;
							height: 100%;
							transform: scale(0.15);
						}
					}

					._p {
						margin: 20px 0;
						font-size: 14px;

						&._yl {
							color: #999;
							cursor: pointer;
							text-align: center;

							i {
								font-size: 16px;
							}

							&:hover {
								opacity: .7;
							}
						}

						&._dis {
							margin: 0;
							color: #999;
							span {
								color: black;
							}
						}
						&.mb{
						  margin-bottom: 40px;
						}

						&._txt {
							font-size: 12px;
							line-height: 20px;
							color: #999;
							display: flex;
							margin: 0;

							._bf {
								margin-right: 5px;
							}
						}

						
						
					}
					  
					

					.btns {
						display: flex;
						margin-top: 20px;

						.zll-botton {
							width: 90px;
							font-size: 14px;
						}
					}
				}
			}
		}

		.list {
			border-top: 1px solid #f2f2f2;
			display: flex;
			align-items: center;

			&:nth-child(1) {
				border-top: 0;
			}

			.part2 {
				width: calc(100% - 150px);
				height: 100%;
				display: flex;
				align-items: center;
				padding: 15px 0;
				position: relative;

				p {
					font-size: 14px;
					color: #999;
				}

				._copy {
					color: #1890ff;
					cursor: pointer;
					font-size: 16px;
					margin-left: 20px;

					&:hover {
						opacity: .7;
					}
				}
			}

			.part1 {
				width: 150px;
				height: 56px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				

				&._last {
					margin: 27px 0;
				}

				.firstTitle {
					font-size: 14px;
					text-align: left;
					padding-left: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin: 0;
					color: #999;
				}

				.subTitle {
					font-size: 12px;
					padding-left: 20px;
					color: #999;
					margin: 5px 0 0 0;
				}
			}

		}
		

		.btnbox {
			display: flex;
			align-items: center;
			justify-content: center;

			.btns {
				display: flex;
				align-items: center;
				justify-content: center;
				.zll-botton {
					font-size: 14px;
					display: inline-block;
					margin-right: 50px;
					padding-left: 40px;
					padding-right: 40px;
				}
			}

		}

	}
</style>